<template>
    <view class="container">
        <view class="thumb">
            <image :src="ValidateInfo.products.thumb_text" mode="aspectFill" width="100%" height="100%" />
        </view>

        <view class="info">
            <view class="validate">
                <view class="icon">
                    <image src="/static/images/validate_active.png"></image>
                </view>
                <view class="txt">
                    您查询的产品是官方正品!
                    <view>请放心使用！</view>
                </view>
            </view>

            <view class="line"></view>

            <view class="list">
                <view class="item">
                    <view class="name">
                        查询次数：
                    </view>
                    <view class="value">
                        {{ValidateInfo.query_num}}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        防伪码：
                    </view>
                    <view class="value text-container">
                        <text class="copy-text">{{ValidateInfo.query_code}}</text>
                        <uv-icon name="复制" size="16" color="#18bc9c" @click="CopyText"></uv-icon>
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        首次查询时间：
                    </view>
                    <view class="value">
                        {{ValidateInfo.query_time_text}}
                    </view>
                </view>

                <view class="item">
                    <view class="name">
                        防伪码所属产品：
                    </view>
                    <view class="value">
                        {{ValidateInfo.products.name}}
                    </view>
                </view>
            </view>

            <view class="code" v-if="ValidateInfo.query_qrcord_text">
                <!-- show-menu-by-longpress 开启长按图片显示识别小程序码菜单 -->
                <image :src="ValidateInfo.query_qrcord_text" show-menu-by-longpress mode="aspectFit" />
            </view>

            <view class="action">
                <uv-button type="success" text="更换防伪码" :customStyle="infoBtn" @click="GetGenerate"></uv-button>
            </view>
        </view>

        <uv-toast ref="notice"></uv-toast>
    </view>
</template>

<script setup>
    const {proxy} = getCurrentInstance()
    
    let code = ref('')
    let notice = ref()
    let ValidateInfo = ref({
        products: {}
    })
    
    let infoBtn = ref({width: '80%'})
    
    onLoad((options) => {
        if(!options.code)
        {
            notice.value.show({
                type: 'error',
                message: '防伪码为空无法查询',
                complete: () => uni.$uv.route({type: 'back', delta: 1})
            })
            
            return false
        }
        
        code.value = options.code
                
        GetInfoData()
    })
    
    // 获取产品数据
    const GetInfoData = async () => {
        let result = await uni.$uv.http.post('/business/ProductInfo', {code: code.value})
        
        if(result.code == 0)
        {
            notice.value.show({
                type: 'error',
                message: result.msg,
                complete: () => uni.$uv.route({type: 'back', delta: 1})
            })
            return false
        }
        
        ValidateInfo.value = result.data
    }

    // 复制防伪码
    const CopyText = () => {
        const text = ValidateInfo.value.query_code
        
        uni.setClipboardData({
            data: text
        })
    }
    
    // 生成防伪码
    const GetGenerate = async () => {
        let result = await uni.$uv.http.post('/business/GenerateCode', {code: code.value})
        
        if(result.code == 0)
        {
            notice.value.show({
                type: 'error',
                message: result.msg
            })
            
            return false
        }
        
        ValidateInfo.value = result.data
    }
</script>

<style>
	page
	{
		background-color: #eee;
		padding-bottom: 10px;
	}

	.container
	{
		width: 100%;
		margin: 0 auto;
	}

	.thumb
	{
		width: 100%;
		height: 280px;
		overflow: hidden;
	}

	.thumb image
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.info
	{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.info .validate
	{
		display: flex;
		align-items: center;
		padding: 10px 0 10px 10px;
	}

	.info .validate image
	{
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.info .validate .txt
	{
		font-size: 14px;
	}

	.info .validate .txt view
	{
		font-size: 12px;
		color: #9b9b9a;
		margin-top: 5px;
	}

	.info .line
	{
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.info .list .item
	{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.info .list .item .name
	{
		color: #9b9b9a;
	}

	.info .code
	{
		width: 100%;
		height: 280px;
		margin: 15px 0px;
	}

	.info .code image
	{
		width: 100%;
		height: 100%;
	}

	.text-container
	{
		display: flex;
		align-items: center;
	}

	.copy-text
	{
		margin-right: 10px;
		font-size: 16px;
	}

	.action{
		width:100%;
		text-align: center;
		display: flex;
		justify-content: center;
	}
</style>
